<template>
  <div>
    <div class="banner" @click='handelbannerclick'>
      <img 
        class="banner-img"
        :src="this.bannerImg">  
      <div class="banner-info">
        <div class='banner-title'>{{this.sightName}}</div>
        <div class="banner-number">
          <!--icon官网搜索图标，添加至购物车，添加至项目，下载至本地，将eot.svg.ttf.woff四个字体文件替换原本的inconfont文件夹中的内容-->
          <!--将官网上的图标复制代码粘贴-->
          <!--此时还无法显示，需要替换成最新的二进制码：assets/iconfont.css中最新的url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP0AAsAAAAACDgAAAOlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDRIMMATYCJAMUCwwABCAFhG0HXBssB8gOJa3AwABgAABgBN+P/X7PlYdKgyQatXlmSHjGE4mm0yEVfDqUytDhy1/vZi8EKFKX7ZlU3MOJprBJU2SZZTk3+TWz7/7P5bRpCcxvZzne2NRaNqZ11KZegNEEysKxB0iBFlCi3DB25UWsJtBqWB/cellNC+gURqdAnCuyCLqUXqkRhmahUTKyQDxA1Zxmq64BuPe/H/8hKXQgqRmMnpuHpRYo+PH/sIef1DHJgSsCbDwr2DgyZoBCXJTaz/FhcAavVamvtgy0apaksWpt+bDtw56ODmJyR3yr+YdHlhRBNMCIbgfLKFT48bcRMj9bEBI/2xj13B6I38tKFbSiGXfAMxiKEbcIoYqc7Our1euDhvlYxppWzAkMvHfP9OBBv4MPsx/eB/Vgc8Ky5ctXhhzlHoDXbjl1r8+9x8Lp+8a5D/OF5XNXTh47dzmU62UG7zkrOM3klUbifexcpHr9+VSfkxdjNBsuWEwt4JMdc3dP2jVnz+S9ycduTbo99+7kOyRw2ZxgacXkEHnl3KCg5ZMCLdh55z299gkCpD90O3AQ+2FVXeVNv4FZclXcl2JleUnapLKIJT7jhdLJNQapO/n/v/uGEhA2li0cvtOvPuZPXd6V2tEpxhEt+8SolHza6/OmTYLfNT9IT6t0Z3U6zL/y27zMfuV7jdNx13zBkKSP7wd/2tzr1eiaXn5SJ3Mn46JZwsyWmcIseCw8m+xVnJZe7FWSllbilXImBcWiGIRSPOGScVbeUfUGIF/xOkD+VN0DIL2rLv/U3zj5PucY5pPzX2dUA3wlHd/m64t+oWaJ1tgvxFpmFZUwDLXI6TYqO6vFm2eTUtCKH+fu9WIc5wCIraGZYxCSJkOQNRsRF/kMVG1moaHZErSaVj6+TR+KF0UPTJkOIHQ7CEmnD8i6XRcX+XOoBn2Hhu7godVWBMzYZiwUQzHFIsMW1DoaKWbikCwTMwTCJiy7bSJNEr7ShKlL8aDEuIRspBw7MB2jj2uEnMSYhCRK7KgMrIdtNoKclLRjM4trY8yZFR8vlT0pzkzsYLCGwkQMZoG0Gg1RmBEOkpufMeQ+3wSTudmIaE1GRdcEo1yU6pFEcRJaiMtZR6uMaznHZQRZEoaRIBKKsEPKgBWzmUECcZY3a4eZMXHaevidssSjXFJbNm5+3v6MK6CVsWcNFcdzak7DaaHrVBEdjLhFSsnIlIw0r6azrSs6ZBsuJs7RHqOUuJEZaylmbuoAAAAAAA==') format('woff2'),-->
          <span class='iconfont banner-icon'>&#xe612;</span>
          {{this.gallaryImgs.length}}
        </div>
      </div>
    </div>
    <fadeanimation>
      <!--commongallary组件作为插槽，因为插槽外部半酣了一个transition，所以具备过渡样式-->
      <commongallary 
        :imgs='gallaryImgs' 
        v-show='showgallary'
        @close='handelgallary'
      >
      </commongallary>
    </fadeanimation>
  </div>
</template>

<script>
import commongallary from 'common/gallary/gallary'
import fadeanimation from 'common/fadeanimation/fade'
export default {
  name:'banner',
  data(){
    return{
      showgallary:false,
      imgs:["https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=136175046,1121203210&fm=26&gp=0.jpg",
         "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2083562203,814093979&fm=26&gp=0.jpg",
         "http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png",
         "http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg"]
    }
  },
  props:{
    sightName:String,
    bannerImg:String,
    gallaryImgs:Array
  },
  components:{
    commongallary,
    fadeanimation
  },
  methods:{
    handelbannerclick(){
      this.showgallary=true
    },
    handelgallary(){
      this.showgallary=false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position:relative
    overflow:hidden
    height:0 
    padding-bottom:55%
    .banner-img
      width:100%
    .banner-info
      display:flex
      position:absolute
      left:0
      right:0
      bottom:0
      line-height:.6rem
      color:#fff
      background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
      .banner-title
        flex:1
        font-size:.32rem
        padding:0 .2rem
      .banner-number 
        line-height:.32rem
        height:.32rem
        padding:0 .4rem 
        margin-top:.14rem
        border-radius:.2rem
        font-size:.24rem
        background:rgba(0,0,0,.8)
        .banner-icon
          font-size:.24rem

</style>
